import React, { useEffect, useState, useMemo } from 'react'
import { useLocation, useParams } from 'umi';
import { Button, Modal, Tooltip, Table } from 'antd';
import './xq.less'
import useARH from '@minko-fe/use-antd-resizable-header';
import '@minko-fe/use-antd-resizable-header/dist/style.css';

// 组件
export default function Xq(props) {
  const location = useLocation();
  const params = useParams();
  let [title, settitle] = useState('')
  let [time, settime] = useState('')
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  useEffect(() => {
    let y = props.history.location.state
    settitle(y.t)
    settime(y.d)
  }, [])
  // 表格
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: "id",
      width: 100,
    },
    {
      title: '用户',
      dataIndex: 'user',
      key: "user",
      width: 100,

    },
    {
      title: '操作',
      dataIndex: 'do',
      key: "do",
      width: 100,

    },
    {
      title: '文件',
      dataIndex: 'flie',
      key: "flie",
      width: 200,

    },
    {
      title: '时间',
      dataIndex: 'time',
      key: "time",
    },
  ];
  const data = [
    {
      key: '1',
      id: 1,
      user: '张妍',
      flie: '关于2020年放假的通知',
      time: '2022-8-13',
      do: '浏览'
    },
    {
      key: '2',
      id: 2,
      user: '张妍',
      flie: '关于2020年放假的通知',
      time: '2022-8-13',
      do: '浏览'
    },
    {
      key: '3',
      id: 3,
      user: '张妍',
      flie: '关于2020年放假的通知',
      time: '2022-8-13',
      do: '浏览'
    }
  ];
  const { components, resizableColumns, tableWidth, resetColumns } = useARH({
    columns: useMemo(() => columns, []),
    // 保存拖拽宽度至本地localStorage
    columnsState: {
      persistenceKey: 'localKey',
      persistenceType: 'localStorage',
    },
  });
  // 渲染
  return (
    <div className="xqbox">
      <Modal footer={null} title="查看日志" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={1800} style={{ height: '200px' }}>
        <Table columns={resizableColumns}
          components={components} dataSource={data}
          scroll={{ x: tableWidth }}></Table>
        <Button onClick={() => resetColumns()}>重置宽度</Button>
      </Modal>
      <div className="top">
        <div onClick={showModal}>查看日志</div>
      </div>
      <div className="mmbox">
        <div className="main">
          <h1 style={{ margin: '20px' }}>{title}</h1>
          <h5 style={{ color: 'rgb(153, 151, 151)', fontWeight: '400' }}>发布时间:{time}</h5>
          <div className="mbox">
            根据国家统一安排，2018年春节放假具体安排通知如下:<br /><br />

            1、2018年2月14日(周三)至2018年2月22日(周四)放假，共9天;2月23日(周五)开始.上班;2月11日(周日)及2月24日(周六)照常上班。<br /><br />

            2、各单位要确保节日期间的安全和稳定,认真组织好突发事件应急管理和安全保卫工作，加强员工的节日安全教育，加强对安全隐患的排查防范，及时化解不稳定因素;<br /><br />

            3、安排好假后上班的生产准备工作，保证上班后各项工作正常进行;各部门在放假前安排好值班。遇有重大突发事件，要按规定及时报告并妥善处置。<br /><br />

            在此，提前预祝全体员工新春快乐!
          </div>
          <div className="r">
            <p>XXXX公司行政部</p>
            <br />
            <p>2018年x月x日</p>
          </div>
          <div className="table">
            <table border='1' cellSpacing='0' cellPadding='0'>
              <thead>
                <tr>
                  <td>文件名称</td>
                  <td>文件大小</td>
                  <td>上传时间</td>
                  <td>上传人员</td>
                  <td> </td>
                  <td> </td>
                  <td> </td>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>相关说明.txt</td>
                  <td>27B</td>
                  <td>3021-04-28 18：39：14</td>
                  <td>张妍</td>
                  <td><a href="">日志</a></td>
                  <td><a href="">查看</a></td>
                  <td><a href="">下载</a></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  )
}


